<template>
	<el-card class="box-card el-card-flex">
		<div slot="header" class="clearfix">
			<span>
				<i class="el-icon-reading"></i>
				会议室预定
			</span>

		</div>
		<div class="text item">
			<el-form :inline="true" :model="formSearch" label-width="100px" @submit.native.prevent>
				<el-form-item label="使用时间">
					<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="formSearch.useDate" type="date" style="width:150px" placeholder="选择日期"
					 :picker-options="pickerOptionsS" @change="dataChange" :clearable="false">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="会议室类型">
					<el-select v-model="formSearch.roomCatId" placeholder="请选择" @change="dataChange" clearable>
						<el-option v-for="(item,k) in seleArr" :key="k" :label="item.rootCatName" :value="item.roomCatId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="" style="float:right">
					<el-button type="primary" :disabled="!roomStartTime" @click="handleCli">预定<i class="el-icon-plus"></i></el-button>
				</el-form-item>
			</el-form>
			<div class="el-flex el-box-column ceshi">
				<el-table class="only-table" :data="myDelegateData" border style="width: 100%" height="100%" ref="agentTable"
				 @cell-click="handleCell" :row-class-name="tableRowClassName">
					<el-table-column min-width="140px" :show-overflow-tooltip="true" prop="" label="会议室名称">
						<template slot-scope="scope">
							<div class="reserTitle" @click="handleReser(scope.$index,scope.row)">
								<p>
									<a href="javascript:;" class="color-blue">{{scope.row.roomName}}</a>
									<span>{{scope.row.mebmers}}</span>
								</p>
								<p>
									<span>{{scope.row.positionName}}</span>
									<span v-if="scope.row.price">¥<b style="color:red">{{scope.row.price}}</b>元/小时</span>
								</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column min-width="55px" :show-overflow-tooltip="true" v-for="(item,k) in getTimeArr" :key="k" :prop="'time_'+k"
					 :label="item" align="center" class-name="reser-cell">
						<template slot-scope="scope">
							<span class="class-timeout" v-if="scope.row['time_'+k] == 1">已预定</span>
							<span class="class-timeout" v-else-if="scope.row['time_'+k] == 2">已超时</span>
							<span class="class-icon" v-else-if="clickRow == scope.$index && (roomStartTime == item || roomEndTime == item)"><i
								 class="el-icon-circle-check" style="color:#FFF;font-size:20px"></i></span>
							<span class="class-color" v-else-if="clickRow == scope.$index && item>roomStartTime && item<roomEndTime"></span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<el-dialog title="会议室详情" :visible.sync="dialogAppVisible" :before-close="handleClose" :close-on-click-modal="false"
		 :close-on-press-escape="false">
			<el-form ref="formReser" label-width="150px" :model="formReser">
				<el-form-item label="会议室名称:">
					<el-col :span="16">
						<span>{{formReser.roomName}}</span>
					</el-col>
				</el-form-item>
				<el-form-item label="会议室类型:">
					<el-col :span="24">
						<span>{{formReser.rootCatName}}</span>
					</el-col>
				</el-form-item>
				<el-form-item label="容纳人数:" prop="name2">
					<el-col :span="24">
						<span>{{formReser.mebmers}}</span>
					</el-col>
				</el-form-item>
				<el-form-item label="会议室设备:">
					<el-col :span="24">
						<el-tag v-for="tag in formReser.deviceList" :key="tag.name" size="medium">
							{{tag.valName}}
						</el-tag>
					</el-col>
				</el-form-item>
				<el-form-item label="会议室环境:" prop="img">
					<el-col :span="24" class="upload-view-pic">
						<el-upload :disabled="true" ref="roomUpload" list-type="picture-card" :file-list="fileList" action="#"
						 :on-preview="handlePreview">
						</el-upload>
						<el-image class="upload-img-preview" :src="imgPreviewUrl" :preview-src-list="[imgPreviewUrl]">
						</el-image>
					</el-col>
				</el-form-item>
			</el-form>

		</el-dialog>
		<el-dialog :visible.sync="roomDialogVisible" size="tiny">
			<img :src="dialogImageUrl" alt="">
		</el-dialog>
	</el-card>

</template>
<script>
	// import $ from 'jquery'
	import {
		Dialog,
		Table,
		TableColumn,
		Pagination,
		MessageBox,
		Message,
		Drawer,
		Tabs,
		TabPane,
		Upload,
		Tag,
		Image
	} from 'element-ui'
	import {
		reservationList, //会议室预定列表
	} from '@/api/conference/reservation.js'
	import {
		categoryList, //会议室类型列表
		getRoom, //获取会议室
	} from '@/api/conference/conferenceManage.js'
	import {
		getTime
	} from '@/api/conference/Initialize.js'
	import {
		attachPath, //附件绝对地址
		findAttchList, //获取文件列表
		preview, //预览图片
		deleteAttid //附件删除
	} from '@/api/attachCommon/attachCommon.js'
	export default {
		name: 'cinferenceType',
		components: {
			'el-dialog': Dialog, // 对话框
			'el-table': Table, // 表格
			'el-table-column': TableColumn, // 表格列
			'el-pagination': Pagination, // 分页
			'el-drawer': Drawer, // 抽屉
			'el-tabs': Tabs, // 标签页
			'el-tab-pane': TabPane, // 标签页列
			"el-upload": Upload, //上传
			'el-tag': Tag, //标签
			'el-image': Image //图片
		},
		data() {
			return {
				intervalTime: 1, //预定时间间隔（小时）
				formSearch: {
					useDate: '',
					roomCatId: ''
				},
				imgPreviewUrl: "",
				fileList: [], //会议室环境图片
				dialogImageUrl: '',
				roomDialogVisible: false,
				clickRow: '', //点击行记录
				roomStartTime: '', //预定开始时间
				roomEndTime: '', //预定结束时间
				activeName: 'first',
				start1: new Date(),
				select1: "0",
				seleArr: [],
				pickerOptionsS: {
					disabledDate(time) {
						return time.getTime() <= Date.now() - 8.64e7 || time.getTime() > Date.now() + (24 * 60 * 60 * 1000) * 13;
					},
				},
				myDelegateData: [

				],
				dialogAppVisible: false,
				formReser: {
					roomName: '',
					rootCatName: '',
					mebmers: '',
					device: '',
					img: ''
				},
				isShow: true,
				row: {},
				id: '',
				arry: [],
				isTimeout: '',
				getTimeArr: [], //允许预定会议的时间段合计
				getCont: 0
			}
		},
		created() {
			this.formSearch.useDate = this.getDate() //初始化设置使用时间为今天
			categoryList({}).then((res) => {
				if (res.data.code == 10000) {
					this.seleArr = res.data.data.records
				}
			})
			getTime().then((res) => {
				if (res.data.code == 10000) {
					let data = res.data.data
					this.intervalTime = data.intervalTime //预定时间间隔（小时）
					let s = Number(data.startTime.split(':')[0])
					let e = Number(data.endTime.split(':')[0]) - 1
					let cont = e - s;
					if (cont <= 1) {
						this.getTimeArr.push(data.startTime)
					} else {
						if (data.intervalTime == 2) { //如果预定时间间隔为2小时
							for (var k = 0; k <= cont; k += 2) {
								let a = s + k
								if (a < 10) {
									a = '0' + a //小于10点则补0
								}
								a = a + ':00'
								this.getTimeArr.push(a)
							}
						} else { //如果预定时间间隔为1小时
							this.getTimeArr.push(data.startTime)
							for (var k = 1; k <= cont; k++) {
								let a = s + k
								if (a < 10) {
									a = '0' + a
								}
								a = a + ':00'
								this.getTimeArr.push(a)
							}
						}
					}
				}
			}).then(() => {
				this.getList() //获取会议室列表
			})
			window.onresize = () => {
				setTimeout(() => {
					this.$refs.agentTable.doLayout() //监听窗口变化，重绘表格布局
				}, 100)
			}
		},
		methods: {
			/* 获取当前系统日期 */
			getDate(num) {
				if (!num) {
					num = 0
				}
				let objDate = new Date()
				objDate.setDate(objDate.getDate() + num) //加天数
				let month = objDate.getMonth() + 1
				if (month < 10) {
					month = '0' + month
				}
				let day = objDate.getDate()
				if (day < 10) {
					day = '0' + day
				}
				let strDate = objDate.getFullYear() + "-" + month + "-" + day
				return strDate
			},
			/* 图片预览 */
			handlePreview(file) {
				this.imgPreviewUrl = file.url
				setTimeout(() => {
					document.querySelector(".upload-img-preview img").click()
				}, 100)
			},
			//获取列表
			getList() {
				reservationList({
					value: this.formSearch
				}).then((res) => {
					var _this = this
					if (res.data.code == 10000) {
						let myDelegateData = res.data.data.records //预定会议室表格数据源
						let hours = new Date().getHours() //当前小时
						if (hours < 10) {
							hours = '0' + hours
						}
						hours += ':00'
						let nowDate = this.getDate()//获取当前日期
						myDelegateData.forEach((e) => {
							this.getTimeArr.forEach((v, i) => {
								let timeStatus = ''
								e.reservationList.forEach((k) => {
									if (v >= k.startTime && v < k.endTime) {
										timeStatus = 1 //已预订
									}
								})
								if (!timeStatus) { //如果没有已预订
									if (this.formSearch.useDate == nowDate && v <= hours) { //如果查询的是当天，和当前小时对比
										timeStatus = 2 //已超时
									}
								}
								e['time_' + i] = timeStatus
							})
						})
						this.myDelegateData = myDelegateData
						setTimeout(() => {
							this.$refs.agentTable.doLayout() // 重绘表格宽度，解决表头对不齐的问题
						}, 0)
					}
				})
			},
			//日期发生改变
			dataChange() {
				this.roomStartTime = ""
				this.roomEndTime = ""
				this.getList()
			},
			//查看会议室
			handleReser(index, row) {
				this.dialogAppVisible = true;
				// let device = []
				// if(row.deviceList){
				//     row.deviceList.forEach((v)=>{
				//         device.push(v.valName)
				//     })
				// }

				// row.device = device.join(',')
				// this.formReser = row;
				getRoom(row.roomId).then(res => {
					if (res.data.code != 10000) return
					Object.assign(this.formReser, res.data.data)
					//获取附件
					findAttchList({
						businessId: row.roomId,
						smallCatName: '图片'
					}).then((res) => {
						if (res.data.code == 10000) {
							if (res.data.data.records !== []) {
								let atts = res.data.data.records
								this.fileList.splice(0, this.fileList.length)
								atts.forEach((v) => {
									this.fileList.push({
										name: v.attFullName,
										url: attachPath + v.attRefId,
										attId: v.attId
									})
								})
							}
						}
					})
				})




			},
			//关闭
			handleClose() {
				this.dialogAppVisible = false;
			},
			//点击预定按钮
			handleCli() {
				this.row.meetingDate = this.formSearch.useDate
				this.row.startTime = this.roomStartTime
				if (this.roomEndTime) {
					this.row.endTime = Number(this.roomEndTime.split(":")[0]) + this.intervalTime + ":00"
				} else {
					this.row.endTime = Number(this.roomStartTime.split(":")[0]) + this.intervalTime + ":00"
				}
				this.giveFuncEvt(this.row)
			},
			/* 添加行索引 */
			tableRowClassName({
				row,
				rowIndex
			}) {
				//把每一行的索引放进row
				row.index = rowIndex
			},
			/* 单元格点击事件 */
			handleCell(row, column, cell, event) {
				if (column.label == "会议室名称" || cell.innerText == "已预定" || cell.innerText == "已超时") { //排除要禁止点击的单元格
					return
				}
				if (this.clickRow == row.index) { //如果是在同一行内点击
					if (this.roomStartTime) {
						if (this.roomEndTime || this.roomStartTime == column.label) {
							this.roomEndTime = ""
							this.roomStartTime = column.label
						} else {
							this.roomEndTime = column.label
						}
					} else {
						this.roomStartTime = column.label
					}
				} else { //如果是在不同行点击
					this.clickRow = row.index
					this.roomStartTime = column.label
					this.roomEndTime = ""
				}
				if (this.roomStartTime && this.roomEndTime && this.roomEndTime < this.roomStartTime) { //校验开始时间和结束时间，如果不符则交换值
					let tempTime = this.roomEndTime
					this.roomEndTime = this.roomStartTime
					this.roomStartTime = tempTime
				}
				this.row = row
			},
			//鼠标划过
			handMouse(row, column, cell, event) {
				let date = new Date();
				let hour1 = date.getHours();
				let minute1 = date.getMinutes();
				let s1 = 0,
					s2 = 0
				let hour2 = column.label.split(':')[0]
				let min2 = column.label.split(':')[1]
				s1 = Number(hour2 * 3600) + Number(min2 * 60)
				s2 = Number(hour1 * 3600) + Number(minute1 * 60)

				let y1 = date.getFullYear()
				let m1 = date.getMonth() + 1
				let d1 = date.getDate()

				let y2 = this.start1.getFullYear()
				let m2 = this.start1.getMonth() + 1
				let d2 = this.start1.getDate()
				let c1 = '',
					c2 = ''
				c1 = y1 + '-' + m1 + '-' + d1
				c2 = y2 + '-' + m2 + '-' + d2
				if ((s1 < s2 || column.label == '会议室名称') && (c1 == c2)) {
					return false;
				}
				if (row.reservationList.length > 0) {
					for (let i = 0; i < row.reservationList.length; i++) {
						if (row.reservationList[i].timeArr.length > 0 || row.reservationList[i].timeArr !== undefined) {
							for (let k = 0; k < row.reservationList[i].timeArr.length; k++) {

								if (row.reservationList[i].timeArr[k].split(':')[0] == column.label.split(':')[0]) {
									return false
									// return 'background:red'
								}
							}
						}
					}

				}
				// cell.style.background = '#ECF5FF'
				// row.isTimeout = '3';

			},
			//滑过推出
			handLeave(row, column, cell, event) {
				let date = new Date();
				let hour1 = date.getHours();
				let minute1 = date.getMinutes();
				let s1 = 0,
					s2 = 0
				let hour2 = column.label.split(':')[0]
				let min2 = column.label.split(':')[1]
				s1 = Number(hour2 * 3600) + Number(min2 * 60)
				s2 = Number(hour1 * 3600) + Number(minute1 * 60)

				let y1 = date.getFullYear()
				let m1 = date.getMonth() + 1
				let d1 = date.getDate()

				let y2 = this.start1.getFullYear()
				let m2 = this.start1.getMonth() + 1
				let d2 = this.start1.getDate()
				let c1 = '',
					c2 = ''
				c1 = y1 + '-' + m1 + '-' + d1
				c2 = y2 + '-' + m2 + '-' + d2
				if ((s1 < s2 || column.label == '会议室名称') && (c1 == c2)) {
					return false;
				}
				// cell.style.background = 'none'
				// row.isTimeout = '3';
			},
			//改变某一列样式
			cellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {

				let date = new Date();
				let hour1 = date.getHours();
				let minute1 = date.getMinutes();
				let s1 = 0,
					s2 = 0
				let hour2 = column.label.split(':')[0]
				let min2 = column.label.split(':')[1]
				s1 = Number(hour2 * 3600) + Number(min2 * 60)
				s2 = Number(hour1 * 3600) + Number(minute1 * 60)

				let y1 = date.getFullYear()
				let m1 = date.getMonth() + 1
				let d1 = date.getDate()

				let y2 = this.start1.getFullYear()
				let m2 = this.start1.getMonth() + 1
				let d2 = this.start1.getDate()
				let c1 = '',
					c2 = ''
				c1 = y1 + '-' + m1 + '-' + d1
				c2 = y2 + '-' + m2 + '-' + d2
				if ((s1 < s2) && (c1 == c2)) {

					row.isTimeout = '1';
				} else {
					row.isTimeout = '';
				}
				if (c1 == c2) {
					if (row.reservationList.length > 0) {
						for (let i = 0; i < row.reservationList.length; i++) {
							if (row.reservationList[i].timeArr.length > 0 || row.reservationList[i].timeArr !== undefined) {
								for (let k = 0; k < row.reservationList[i].timeArr.length; k++) {
									if (row.reservationList[i].timeArr[k].split(':')[0] == column.label.split(':')[0]) {
										row.isTimeout = '2';
										// return 'background:red'
									}
								}
							}
						}

					}
				}

			},

			// //路由跳转
			/*跳转到新增功能路由组件*/
			giveFuncEvt(row) {
				//this.multiRouters是全局提供的自动添加多级路由的方法
				this.$router.addRoutes(this.multiRouters([{
					path: 'creatReservation',
					name: 'creatReservation', //自定义name名称
					component: () => import('@/views/conference/reservation/creatReservation'),
					meta: {
						title: '会议室预定'
					}
				}]));
				this.$router.push(this.routerMatch({
					name: "creatReservation", //顶部导航+侧边导航
					params: {
						row: row
					}
				}))
			},
		}
	}
</script>
<style lang="scss">
	.el-tag--medium {
		height: 30px;
		line-height: 28px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.el-tab-pane {
		height: 100%
	}

	.reserTitle {
		cursor: pointer;
		padding: 0 10px;
	}

	.reserTitle p span:nth-child(2) {
		float: right;
	}

	.class1 {
		width: 100%;
		height: 62px;
		background: #ccc;
	}

	.only-table .cell {
		padding: 0 !important;
	}

	.only-table.el-table {
		th.reser-cell {
			overflow: visible;

			&>.cell {
				left: -50%;
			}
		}
	}

	.ceshi>.el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: rgba(0, 0, 0, 0);
	}

	.class-timeout {
		background: #F5F7FA !important;
		display: block;
		height: 32px;
		line-height: 32px;
	}

	.class-icon {
		background: #409EFF !important;
		display: block;
		height: 32px;
		line-height: 38px;
	}

	.class-color {
		background: #D9ECFF;
		display: block;
		height: 32px;
		line-height: 32px;
	}

	.upload-view-pic .el-upload--picture-card {
		display: none;
	}
</style>
